import React, { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import {
    Input, Button,
    Radio,
    Form,
    Toast
} from 'react-vant'

import { AddFeedback } from '../sevice/FeedService'


export default function Feedback() {

    const navigate = useNavigate();

    //form表单
    const [form] = Form.useForm()

    //清空表单
    const reset = () => {
        form.resetFields()
    }

    const onFinish = async (values) => {

        let { data } = await AddFeedback({
            content: values.content,
            title: values.title
        })
        if (data.code == 200) {
            Toast.info('反馈成功')
            reset()
        }
    }




    return (
        <div>
            <NavBar onBack={() => { navigate("/Lifepay") }}>意见反馈</NavBar>

            <div style={{ background: '#F7F7F9', height: 30, paddingTop: 15 }}>*您想反馈的问题类型
                <span style={{ marginLeft: 200, color: 'red' }}
                    onClick={() => { navigate("/Lifepay/feedbackHistory") }}
                >*反馈历史</span></div>

            <Form
                style={{ padding: 20 }}
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' block style={{ background: 'purple', color: '#F7F7F9' }}>
                            提交
                        </Button>
                    </div>
                }>



                <Form.Item name='title' label='单选框'>

                    <Radio.Group direction="horizontal"    >

                        <Radio name="缴费问题" checkedColor="purple"  >
                            缴费问题
                        </Radio>
                        <Radio name="活动问题" checkedColor="purple"  >
                            活动问题
                        </Radio>
                        <Radio name="体验不佳" checkedColor="purple"  >
                            体验不佳
                        </Radio>
                        <Radio name="其他" checkedColor="purple"  >
                            其他
                        </Radio>
                    </Radio.Group>

                </Form.Item>


                <Form.Item name='content' label='问题描述 ' >
                    <Input.TextArea rows={3} autoSize maxLength={140} showWordLimit placeholder='感谢您的想法与建议，我们将会考虑和完善' />
                </Form.Item>


            </Form>
        </div>
    )
}
